<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery-1.8.3.js"></script>
    <script src="TagBox.js"></script>
    <style>
        .i-tag-box {
            display: inline-block;
            border: 1px solid #B5B8C8;
            font-size: 12px;
            padding: 3px;
            height: 22px;
        }
        .i-tag-box-tag-ct {
            display: inline-block;
        }
        .i-tag-box-tag {
            display: inline-block;
            border: 1px solid #7EADD9;
            padding: 2px 14px 2px 2px;
            margin-right: 3px;
            vertical-align: baseline;
            height: 16px;
            line-height: 16px;
            position: relative;
        }
        .i-tag-box-tag-selected {
            background-color: #CBDAF0;
        }
        .i-tag-box-delete {
            display: inline-block;
            background-color: #7eadd9;
            width: 12px;
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            cursor: pointer;
        }
        .i-tag-box-delete:after {
            content: 'x';
            position: absolute;
            display: block;
            line-height: 18px;
            right: 2px;
            top: 0;
            bottom: 0;
            cursor: pointer;
            color: white;
        }
        .i-tag-box-input {
            border: 0 none;
            padding: 3px;
            height: 16px;
            line-height: 16px;
            outline: none;
        }
    </style>
</head>
<body>
<form method="get" action="demo.html" id="test">
    <input type="submit">
</form>
<script>
    var tagBox = new TagBox({
        separator: [' ', ';', '\n', ','],
        submitSeparator: ' ',
        name: 'tag-box'
    });
    tagBox.render('#test');
</script>
</body>
</html>
